<template>
   <div class="classList-container">
      <el-card style="margin-right: 3%;">
         <div class="box">
            <div class="left">
               <el-button type="primary" icon="Plus" @click="addData" class="add-btn">添加课程</el-button>
            </div>
            <div class="right">
               <el-button type="primary" icon="Compass" :disabled="apperMainClass" @click="getClassInfo"
                  class="add-btn">必修课</el-button>
               <el-button type="primary" icon="Promotion" @click="getCommonClass" :disabled="!apperMainClass"
                  class="add-btn">选修课</el-button>
            </div>
         </div>

         <el-table style="width: 100%" :data="tableData" border>
            <el-table-column type="index" label="序号" align="center" />
            <el-table-column prop="id" label="id" align="center" />
            <el-table-column prop="teacherName" label="课程教师" align="center" />
            <el-table-column prop="couserName" label="课程名称" align="center" />
            <el-table-column prop="couresTypes" label="课程类型" align="center" />
            <el-table-column prop="createTime" label="创建时间" align="center" />
            <el-table-column label="操作" align="center" width="220">
               <template #="{ row }">
                  <el-button type="primary" icon="Edit" @click="editClassData(row)">编辑</el-button>
                  <el-popconfirm :title="`你确定要删除此${row.couserName}课的信息吗?`" width="200" @confirm="deletClassData(row.id)">
                     <template #reference>
                        <el-button type="danger" style="margin-right: 12px" icon="Delete">删除</el-button>
                     </template>
                  </el-popconfirm>
               </template>
            </el-table-column>
         </el-table>
         <el-pagination v-model:current-page="classCurrentPage" v-model:page-size="classPageSize" class="pagination"
            :page-sizes="[4, 6, 8]" layout=" prev, pager, next, jumper,->,sizes,total" :total="totalClass"
            :background=true @change="getClassInfo(classCurrentPage, classPageSize)" />
      </el-card>
      <el-dialog v-model="dialogApear" :title="addvari ? '添加课程' : '修改课程'" width="800">
         <el-form :model="classForm" label-width="80px" style="width:80%;margin-left: 30px" :rules="formRule"
            ref="Form">
            <el-form-item label="课程名称" prop="couserName">
               <el-input v-model="classForm.couserName" placeholder="请输入课程名称" />
            </el-form-item>


            <!--  有改动-->
            <el-form-item label="授课教师" prop="teacherName">
               <el-input v-model="classForm.teacherName" placeholder="请输入授课教师名字" />
            </el-form-item>
            <el-form-item label="课程类型" prop="couresTypes">
               <el-radio-group v-model="classForm.couresTypes" class="ml-4" >
                  <el-radio value="1" size="large">必修课</el-radio>
                  <el-radio value="2" size="large">选修课</el-radio>
               </el-radio-group>
            </el-form-item>
         </el-form>
         <template #footer>
            <el-button type="primary" @click="canceltDialogData">取消</el-button>
            <el-button type="primary" @click="submitDialogData">确认</el-button>
         </template>
      </el-dialog>
   </div>
</template>

<script setup lang='ts'>
import { ref, nextTick, onBeforeMount, } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { setClass } from "@/stores/modules/classList/index"

//显示必修课或者选修课
let apperMainClass = ref<boolean>(true)
//仓库、
let classStore = setClass()
let totalClass = ref<number>()
const classCurrentPage = ref<number>(1)
const classPageSize = ref<number>(4)
//获取必修课的数据
const getClassInfo = async (currentPage: number, pageSize: number) => {
   apperMainClass.value = true;
   let res = await classStore.getMainClass(classCurrentPage.value, classPageSize.value);
   let arr:any = [];
   arr = res.rows;
   arr.forEach((item:any)=>{
      if(item.couresTypes ==1){
         item.couresTypes = '必修课'
      }
      if(item.couresTypes ==2){
         item.couresTypes = "选修课"
      }
   })
   tableData.value = res.rows;
   totalClass.value = res.total;
}
//获取选修课课的数据
const getCommonClass = async () => {
   apperMainClass.value = false
   
   let res = await classStore.getCommonClass(classCurrentPage.value, classPageSize.value)
   let arr:any = [];
   arr = res.rows;
   arr.forEach((item:any)=>{
      if(item.couresTypes ==1){
         item.couresTypes = '必修课'
      }
      if(item.couresTypes ==2){
         item.couresTypes = "选修课"
      }
   })
   tableData.value = res.rows
   totalClass.value = res.total
}
//发送添加教师的请求
const addClass = async () => {
   await classStore.addClass(classForm.value)

}
//发送修改教师的请求
const editClass = async () => {
   let data:any = {}
   data.id = recordId.value
   Object.assign(data,classForm.value)
   await classStore.editClass(data)
}
//挂载完成后，获取课程列表
onBeforeMount(async () => {
   await getClassInfo(classCurrentPage.value, classPageSize.value)
   
})
//对话框的显示于隐藏
let dialogApear = ref<boolean>(false)
//表格展示得内容
let tableData: any = ref([])

let addvari = ref<boolean>(true)
//element-plus 表单对象实例
let Form = ref()
//校验表单
let classForm = ref({
   couserName: '',
   couresTypes: '',   
   teacherName:''
})
const validatePass = (rule: any, value: any, callback: any) => {
   if (value === '') {
      callback(new Error('课程名称不能为空'))
   } else {
      callback()
   }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
   if (value === '') {
      callback(new Error('课程类型不能为空'))
   }
   else {
      callback()
   }
}
const validatePass3 = (rule: any, value: any, callback: any) => {
   if (value === '') {
      callback(new Error('授课教师不能为空'))
   }
   else {
      callback()
   }
}
const formRule = ref<FormRules<typeof classForm>>({
   couserName: [{ validator: validatePass, trigger: 'blur' }],
   couresTypes: [{ validator: validatePass2, trigger: 'blur' }],
   teacherName: [{ validator: validatePass3, trigger: 'blur' }],
})
//取消
const canceltDialogData = () => {
   dialogApear.value = false
}
//确认添加或修改
const submitDialogData = async () => {
   await Form.value.validate()
   dialogApear.value = false
   if (addvari.value) {
      await addClass()
      await getClassInfo(classCurrentPage.value, classPageSize.value)

   } else {
      await editClass()
      await getClassInfo(classCurrentPage.value, classPageSize.value)
   }
}
//添加课程时显示对话框
const addData = () => {
   
   addvari.value = true
   dialogApear.value = true
   nextTick(() => {
      Form.value.clearValidate("couserName")
      Form.value.clearValidate("couresTypes")
      Form.value.clearValidate("cteacherName")
   })
   classForm.value.couserName = ''
   classForm.value.couresTypes = ''
   classForm.value.teacherName = ''

}
//编辑教师信息
let recordId = ref<number>()
const editClassData = (item: any) => {
  
   addvari.value = false
   dialogApear.value = true
   nextTick(() => {
      Form.value.clearValidate("couserName")
      Form.value.clearValidate("couresTypes")
      Form.value.clearValidate("teacherName")
   })
   
   classForm.value.couserName = item.couserName
   classForm.value.couresTypes = item.couresTypes.toString()
   classForm.value.teacherName = item.teacherName
   recordId.value = item.id
}
//删除教师信息
const deletClassData = async (id: number) => {
   await classStore.delClass(id)
   await getClassInfo(classCurrentPage.value, classPageSize.value)
}
</script>

<style lang="scss" scoped>
.box {
   display: flex;
   justify-content: space-between;
}

.add-btn {
   margin-bottom: 20px;
}

.pagination {
   margin-top: 20px;
   display: flex;
   justify-content: center;
}
</style>


